<template>
  <div>
    <a-alert type="info" style="margin-bottom: 12px">
        <span style="margin-left: 1em" slot="message">
          已选择<span style="margin-left: 6px;color: #1890ff">{{selectedRowKeysData.length}}</span>项
          <a @click="()=>{selectedRowKeysData=[]}"
             style="margin-left: 1em;color: #1890ff;display: inline-block">清空</a>
          <a-popover
            style="float: right;height: 100%"
            v-model="columnVisible"
            title="自定义列"
            trigger="click"
            placement="left"
          >
            <div slot="content">
              <a-checkbox-group
                @change="checkOnChange"
                :defaultValue= defaultValue
              >
                <el-row :gutter="12">
                  <el-col style="padding: 6px 12px" :span="6" v-for="item in columns">
                    <a-checkbox :value="item.key">
                      {{item.title}}
                    </a-checkbox>
                  </el-col>
                </el-row>
              </a-checkbox-group>
            </div>
            <a-button type="link" icon="setting">自定义列</a-button>
          </a-popover>

        </span>
    </a-alert>
    <a-table
      :size="size"
      bordered
      :rowKey="record => record.id"
      :loading="loading"
      :data-source="dataSource"
      :pagination="iPagination"
      :scroll="scroll"
      :rowSelection="{
        selectedRowKeys: selectedRowKeysData,
        onChange: onSelectChange,
      }"
      @change="handleTableChange"
    >
      <a-table-column
        v-for="item in tableColumns"
        :key="item.key"
        :dataIndex="item.key"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :title="item.title"
      >
        <template slot-scope="t, r, i">
          <slot :name="item.key" :data="{t, r, i}">
            {{t}}
          </slot>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script>
  export default {
    props: {
      defaultValue:{
        type: Array,
        default: ()=>{
          return new Array()
        },
      },
      size: {
        type: String,
        default: "small"
      },
      type:{
        type: String,
        default: ""
      },
      columns: {
        type: Array,
        default: ()=>{
          return new Array()
        },
      },
      scroll: {
        type: Object,
        default: () => {
          return {}
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      selectedRowKeys: {
        type: Array,
        default: () => {
          return new Array()
        }
      },
      value: {
        type: Array,
        default: ()=>{
          return new Array()
        },
      },
      iPagination: {
        type: Object,
        default: () => {
          return {}
        }
      },
      tableChange: {
        type: Function,
        default: null
      },
    },
    data() {
      return {
        tableColumns: [],
        selectedRowKeysData:[],
        dataSource: [],
        columnVisible: false,
      }
    },
    created() {
      this.dataSource = this.value
      this.tableColumns = this.columns
      //this.selectedRowKeysData = this.selectedRowKeys
    },
    watch:{
      // 父子组件双向通信
      value(val) {
        // 监听 父组件value, 动态赋值
        this.dataSource = val
      },
      dataSource(val) {
        // 监听 visible, 使用$emit 将消息提交给父组件
        this.$emit('input', val)
      },
      selectedRowKeys(val) {
        this.selectedRowKeysData = val
      },
      selectedRowKeysData(val) {
        this.$emit('selectedRowKeysChange', val)
      }
    },
    methods: {
      handleTableChange(pagination, filters, sorter) {
        if (this.tableChange) {
          this.tableChange(pagination, filters, sorter)
        }
      },
      checkOnChange(checkedValues) {
        if (checkedValues&&this.columns) {
          this.tableColumns = []
          this.columns.forEach(item => {
            if (checkedValues.includes(item.key)) {
              this.tableColumns.push(item)
            }
          })
        }
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeysData = selectedRowKeys;
        //console.info(this.selectedRowKeysData.length)
        //this.selectionRows = selectionRows;
      },
    }
  }
</script>

<style>

</style>
